<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>注册</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/admin/reg/font_24081_qs69ykjbea.css">
    <link rel="stylesheet" href="/admin/lib/layui-v2.4.5/layui/css/layui.css">
    <link rel="stylesheet" href="/admin/reg/global.css" charset="utf-8">   
    
    {{-- <link id="layuicss-layer" rel="stylesheet" href="/admin/reg/layer.css" media="all"> --}}
    <style>
        /* .captcha {
            position: relative;
            height: 38px;
            cursor: pointer;
        } */
        input.error, select.error, textarea.error {
            background-color: #fbe2e2;
            border-color: #c66161;
            color: #c00;
        }
        #sex-error,label.error {
            position: absolute;
            right: 10px;
            top: 10px;
            color: #ef392b;
            font-size: 12px;
        }
        #sex-error{ 
            right:auto; 
            /* width:150px;  */
            left:45px;
            top:30px;
            font-size: 14px;
        }
        html body {
            margin-top: 0px;
        }
    </style>
</head>

<body>
    {{-- <div class="fly-header layui-bg-black">
        <div class="layui-container"> <a class="fly-logo" href="#"> <img src="/admin/reg/HB.ico" alt="layui">
            </a><span style="line-height: 61px;font-size:16px;margin-left: 55px;">汇邦电气</span>
            <ul class="layui-nav fly-nav-user">
                <li class="layui-nav-item"> <a class="iconfont icon-touxiang layui-hide-xs" href="{{ route('loginAdmin') }}"></a> </li>
                <li class="layui-nav-item"> <a href="{{ route('loginAdmin') }}">登录</a> </li>
            </ul>
        </div>
    </div> --}}
    <div class="layui-container fly-marginTop">
        <div class="fly-panel fly-panel-user" pad20="">
            <div class="layui-tab layui-tab-brief" lay-filter="user">
                {{-- <ul class="layui-tab-title">
                    <li class="layui-this">注册</li>
                </ul> --}}
                <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form layui-form-pane">
                            <form autocomplete="off" id="form-reg">
                                <div class="layui-form-item"> <label for="username" class="layui-form-label">登录名</label>
                                    <div class="layui-input-inline"> <input type="text" id="username" name="username" class="layui-input" autofocus autocomplete="off" >
                                    </div>
                                    <!-- <div class="layui-form-mid layui-word-aux">你在社区的名字</div> -->
                                </div>
                                <div class="layui-form-item"> <label for="realname" class="layui-form-label">真实姓名</label>
                                    <div class="layui-input-inline"> <input type="text" id="realname" name="realname" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">注册后不能更改</div>
                                </div>
                                <div class="layui-form-item"> <label for="password" class="layui-form-label">密码</label>
                                    <div class="layui-input-inline"> <input type="password" id="password" name="password" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">必须同时包含大小写字母和数字，长度在8-30之间</div>
                                </div>
                                <div class="layui-form-item"> <label for="repass" class="layui-form-label">确认密码</label>
                                    <div class="layui-input-inline"> 
                                        <input type="password" id="repass" name="repass" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item"> <label for="sex1" class="layui-form-label">性别</label>
                                    <div class="layui-input-inline" style="text-align:center">
                                        <input type="radio" name="gender" id="sex1" value="1" title="男" lay-filter="gender">
                                        <label id="sex-error" class="sex-error" for="gender" hidden="hidden">必须选择性别</label>
                                        <input type="radio" name="gender" id="sex2" value="2" title="女" lay-filter="gender">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">注册后不能更改</div>
                                </div>
                                <div class="layui-form-item"> <label for="telephone" class="layui-form-label">手机</label>
                                    <div class="layui-input-inline"> <input type="text" id="telephone" name="telephone" class="layui-input">
                                    </div>
                                </div>
                                {{-- <div class="layui-form-item"> <label for="captcha" class="layui-form-label">验证码</label>
                                    <div class="layui-input-inline"> <input type="text" id="captcha" name="captcha" class="layui-input" maxlength="4">
                                    </div>
                                    <div class="layui-form-mid" style="padding: 0!important;"> <img src="{{ captcha_src('flat') }}" class="captcha"> </div>
                                </div> --}}

                                @csrf

                                <div class="layui-form-item"> 
                                    <input class="layui-btn" type="submit" value="添 加" style="margin-left:120px">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- <div class="fly-footer">
        <p>本系统由<a href="http://www.hbdq.net/" target="_blank">保定市汇邦电气有限公司</a>提供技术支持</p>
        <p>备案号：<a href="http://www.beian.miit.gov.cn" target="_blank">冀ICP备05003073号</a></p>
    </div> --}}
    <script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
    <script src="/admin/lib/layui-v2.4.5/layui/layui.js"></script> 
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js?ver={{config('constant.static_res_ver')}}"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.form.js"></script>
    <script>
     /*关闭弹出框口*/
    function layer_close(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

    $(function(){
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer
            ,form = layui.form;
            
            // form.render('radio'); //刷新radio选择框渲染

/*********此处为全局变量定义区域-----开始***********/
            //当点击任意一个radio后，此变量变为true。用于验证用户是否选择了性别
            var gender_select=false;
            //layer弹窗的索引，关闭layer时要用到
            var index2;
            //获取验证码的地址  
            // var src=$('.captcha').attr('src');

/*********此处为全局变量定义区域-----结束***********/
            //点击切换验证码
            // $('.captcha').click(function(){
            //     $(this).attr('src',src + '=' + Math.random());
            // });

            form.on('radio(gender)', function(data){
                gender_select=true;
                $('#sex-error').hide();
            });
        
        
            $("input[type=submit]").click(function (){
                if (!gender_select) {
                    $('#sex-error').show();
                }
            });

            $("#form-reg").validate({
                rules:{
                    username:{
                        required:true,
                        notSpace:true,
                        minlength:1,
                        maxlength:10,
                        remote : '/{{config('constant.name_admin')}}/manager/usernameCheckAdd',
                    },
                    realname:{
                        required:true,
                        isChinese:true,
                        minlength:2,
                        maxlength:4
                    },
                    // gender:{
                    //     required:true
                    // },
                    password:{
                        required:true,
                        pwdIsOk:true,
                        // minlength:6,
                    },
                    repass:{
                        required:true,
                        equalTo:"#password"
                    },
                    telephone:{
                        required:true,
                        isMobile:true,
                    },
                    /* captcha:{
                        required:true,
                        minlength:4, 
                        // maxlength:4,//直接写在input内，可以限制只能输入4个字符
                        isCaptcha:true,
                    }, */
                },
                messages: { 
                    username: { 
                        remote: "此登录名已存在" 
                    },
                },
                // onkeyup:false,  //建议关闭
                // focusCleanup:false,//建议关闭
                success:"valid",
                submitHandler:function(form){
                    let arr = ['password','repass'];
                    for (let i in arr) {
                        $('input[name='+arr[i]+']').val(btoa($('input[name='+arr[i]+']').val()));
                    }
                    $(form).ajaxSubmit({ 
                        type: 'post', 
                        url: "",//自己提交给自己可以不写url   
                        //beforeSend  beforeSubmit
                        beforeSubmit : function () { 
                            //如果验证不通过，返回false，阻止表单提交
                            if (!gender_select) {
                                // $('#sex-error').show();
                                return false;
                            }
                        },

                        beforeSend : function () { 
                            //0.4透明度 白色遮罩
                            index2 = layer.load(2,{ shade: [0.3,'#fff'] }); 
                        },
                        complete : function () { 
                            layer.close(index2); 
                        },
                        success: function(data) {
                            //判断注册结果 
                            if(data === '1'){ 
                                parent.table_reload(0);//0停留在当前页，1回到第一页
                                parent.layer.msg('添加成功!', { icon: 1, time:2000});
                                layer_close();
                            }else{
                                // 更新验证码
                                // $('.captcha').attr('src',src + '=' + Math.random());
                                layer.msg('注册失败!', { icon: 2, time: 2000 }); 
                            } 
                        }, 
                        error: function(data) {
                            // 更新验证码
                            // $('.captcha').attr('src',src + '=' + Math.random());
                            if (data.status==422) {
                                // var json=JSON.parse(data.responseText);
                                var json=$.parseJSON(data.responseText);
                                allError='';
                                $.each(json.errors,function (index,el) {
                                    allError += el + '<br>'; 
                                });
                                //输出错误信息 
                                layer.open({
                                    content:allError,
                                    title:false,
                                    type: 0,
                                    icon: 5,
                                    // skin: 'layui-layer-molv',
                                    btn:'',
                                    closeBtn: 2, //右上角关闭按钮风格  0无,1默认,2
                                    shadeClose: true, //开启遮罩关闭
                                    time:0,
                                    anim: 6,//弹出动画
                                });    
                            } else {
                                console.log(data);
                                ajax_error(data);
                            }
                        }///error---end
                    }); //ajaxSubmit---end
                }//submitHandler---end
            });//validate---end
        });//layui.use---end
    });//$ function---end
    </script>
</body>

</html>